<template>
  <!-- 净借记限额质押/授信分配管理录入页面 -->
  <div class="app-container" style="overflow: scroll">
    <div style="width: 1024px; margin: 20px auto">
      <el-form ref="settingsForm" :model="formData" :rules="rules" label-width="135px">
        <el-card class="form-card txnInfo-card">
          <el-row>
            <el-col :span="12">
              <el-form-item label="发起参与机构：" prop="directSender">
                <el-input v-model="formData.directSender" placeholder="发起参与机构" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发起参与机构名称：" prop="directSenderName">
                <el-input v-model="formData.directSenderName" placeholder="发起参与机构名称" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="调整额度种类：" prop="oprClass">
                <el-select v-model="formData.oprClass" placeholder="请选择" style="width: 100%" :disabled="!isShow">
                  <el-option
                    v-for="dict in dictMap.OPR_CLASS"
                    :key="dict.value"
                    :label="`${dict.value}-${dict.text}`"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="调整类型：" prop="oprType">
                <el-select v-model="formData.oprType" placeholder="请选择" style="width: 100%" :disabled="!isShow">
                  <el-option
                    v-for="dict in dictMap.OPERATIONTYPECODE"
                    :key="dict.value"
                    :label="`${dict.value}-${dict.text}`"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="清算行数目：" prop="numStBrno">
                <el-input v-model="formData.numStBrno" placeholder="清算行数目" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="清算行行号：" prop="stBrno">
                <el-input v-model="formData.stBrno" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="6">
              <el-button v-if="isShow" icon="el-icon-search" plain type="primary" @click="openBankBranchDialog">
                行名行号查询
              </el-button>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="货币种类：" prop="curcd">
                <el-input v-model="formData.curcd" placeholder="货币种类" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="调整额度：" prop="oprAmt">
                <HtAmountInput v-model="formData.oprAmt" placeholder="调整额度" :disabled="!isShow" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="form-card txnInfo-card">
          <div slot="header" class="label-header-msg">
            <span>信息清单列表</span>
          </div>
          <el-button type="primary" @click="addFn" icon="el-icon-add" v-if="isShow">新增</el-button>
          <el-table :data="detailListTbl" ooltip-effect="dark">
            <el-table-column prop="stBrno" label="清算行行号" align="center"></el-table-column>
            <el-table-column prop="curcd" label="货币种类" align="center"></el-table-column>
            <el-table-column prop="oprAmt" label="调整额度" align="center"></el-table-column>
            <el-table-column prop="operation" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="deleteFn(scope.$index, scope.row)" v-if="isShow">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-form>
      <div class="bottom-control">
        <el-button type="primary" @click="submitForm" v-if="isShow" :loading="isLoading">提交</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </div>
      <!-- 行号行名查询 -->
      <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
    </div>
  </div>
</template>
<script>
import { save } from "@/api/cnaps/saps/otherCommQuery/net_credit_all_entry.js";
import { log } from "util";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import { getBankInfByBankCode } from "@/api/cnaps/common/bankInfo";
import { listPageMixin } from "@/libs/listPageMixin";
import { mapGetters } from "vuex";
import HtAmountInput from "@/views/components/HtAmountInput/index.vue";
export default {
  name: "netCreditAllEntry",
  mixins: [listPageMixin],
  components: { BankBranchDialog, HtAmountInput },
  data() {
    return {
      isShow: true,
      detailListTbl: [], //新增列表数据
      //数据字典
      searchFormDictList: ["OPR_CLASS", "OPERATIONTYPECODE"],
      isLoading: false,
      formData: {
        curcd: "CNY",
        directSender: "",
        directSenderName: "",
      },
      rules: {
        oprClass: [
          {
            required: true,
            message: "必填",
            trigger: "change",
          },
        ],
        oprType: [
          {
            required: true,
            message: "必填",
            trigger: "change",
          },
        ],
        stBrno: [
          {
            required: true,
            trigger: "blur",
            message: "必填",
          },
        ],
        oprAmt: [
          {
            required: true,
            message: "必填",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  computed: {
    ...mapGetters(["globalBusData"]),
  },
  watch: {
    globalBusData: {
      handler(val) {
        this.$set(this.formData, "directSender", val.cnapsBrno);
        this.$set(this.formData, "directSenderName", val.cnapsBrname);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 新增方法
    addFn() {
      this.$refs["settingsForm"].validate((valid) => {
        if (valid) {
          let addArr = {
            curcd: this.formData.curcd,
            stBrno: this.formData.stBrno,
            oprAmt: this.formData.oprAmt,
          };
          this.detailListTbl.push(addArr);
          this.$set(this.formData, "oprAmt", "");
          this.$set(this.formData, "stBrno", "");
          this.$set(this.formData, "numStBrno", this.detailListTbl.length);
        }
      });
    },
    // 删除方法
    deleteFn(index, row) {
      this.$confirm("确定删除该条信息吗？", "系统提示", {
        confirmButtonText: "确定",
        type: "warning",
      })
        .then((res) => {
          this.detailListTbl.splice(index, 1);
          this.$set(this.formData, "numStBrno", this.detailListTbl.length);
        })
        .catch((err) => {});
    },
    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      console.log("row", row);
      this.$set(this.formData, "stBrno", row.bankCode);
    },
    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },
    checkbankcode() {
      getBankInfByBankCode(this.formData.stBrno).then((response) => {
        if (response.code == "S" && response.result !== null) {
          this.$set(this.formData, "stBrno", response.result.bankCode);
        } else {
          this.msgError("无行名行号记录");
        }
      });
    },
    // 表单重置
    reset() {
      this.resetForm("settingsForm");
      this.isShow = true;
      this.$set(this, "detailListTbl", []);
    },
    submitForm() {
      if (this.detailListTbl.length == 0) {
        this.$confirm("请新增一条记录", "系统提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warning",
        }).catch((err) => {});
        return;
      }
      this.isLoading = true;
      let saveObj = {
        ...this.formData,
        detailListTbl: this.detailListTbl,
      };
      save(saveObj)
        .then((res) => {
          this.msgSuccess("提交成功！");
          this.isLoading = false;
          this.isShow = false;
          this.$alert(`CORE_ID: ${res.result.rspId}`, "生成交易流水号", {
            confirmButtonText: "确定",
            callback: (action) => {
            },
          });
          this.$emit("editComplete", true);
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.bottom-control {
  margin: 30px 0;
  text-align: center;
}
.label-header-msg {
  font-weight: bold;
}

.form-card {
  margin-bottom: 10px;
}
</style>
